<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>背景图片的精灵图的使用</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <style type="text/css">
			.box{
			 	  width: 85px;
			 	  height: 32px;
			 	  background-image: url("qq.png");
			 	  background-position: -601px -160px;
			 	  margin: 400px  300px;
			 }
        </style>
        <!-- 精灵图使用（重点）
        ☞浏览器中的坐标系
            圆点以右为正方向，圆点以下为正。

        ☞CSS精灵是一种处理网页背景图像的方式。精灵图也是一种背景图片
        ☞精灵图的使用
        ◆使用fw一定要用打开的方式打开精灵图
        ◆使用精灵图作为背景图片的时候，常与background-position配合使用
        ◆测量精灵图中的元素的坐标使用矩形选择器 -->

</head>
<body>
    <div class="box">

    </div>



</body>
</html>